<template>
  <div :class="{'is-collapse':isCollapse}">
    <div class="logo-wrap">
      <img src="../assets/image/niao.png" alt="">
    </div>
    <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      :router="true"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">系统管理</span>
        </template>
        <el-menu-item index="1-1" route="/menuManage">菜单管理</el-menu-item>
        <el-menu-item index="1-2" route="/userManage">用户管理</el-menu-item>
        <!--<el-menu-item index="1-3">角色管理</el-menu-item>-->
      </el-submenu>
      <el-menu-item index="2" route="/personalCenter">
        <i class="el-icon-user"></i>
        <span slot="title">个人中心</span>
      </el-menu-item>
      <el-menu-item index="3" route="/articleManage">
        <i class="el-icon-document"></i>
        <span slot="title">文章管理</span>
      </el-menu-item>
      <el-menu-item index="4" route="/slideManage">
        <i class="el-icon-picture-outline"></i>
        <span slot="title">轮播管理</span>
      </el-menu-item>
      <el-menu-item index="4" route="/tagManage">
        <i class="el-icon-picture-outline"></i>
        <span slot="title">标签管理</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "sidebar",
    data() {
      return {}
    },
    computed: {
      ...mapState(['isCollapse', 'routeList']),
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style lang="less" scoped>
  .logo-wrap {
    background-color: #FFFFFF;
    height: @height-header;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid @color-border;

    img {
      width: 65px;
      transition: .3s;
    }
  }

  .is-collapse {
    .logo-wrap {
      img {
        width: 50px;
      }
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
